4: Design Palette

Table detailing a wide variety of controls that can be used to create web front-ends. You will also find additional tables below that provide details on more text controls, grids, layout containers and features that enable you to create and package your own controls for reuse.

Control	Description and Notes
Text Box	This is the editable single line text box.
Display Only Output	This is a display-only text box.
Font Icon	Selectable font icon control. You can select icons from the Font Awesome range and also style and allocate behaviour on events such as onclick, etc.
Button	A standard button that can trigger events.
Hyperlink	Standard HMTL Hyperlink, with the ability to set events upon click, using the Events tab.
Radio	Allows users to select one option from a series of choices. These options can be a fixed set of values (static) defined in the Properties Data Constraints section, or dynamically defined based on underlying data. If the option is dynamic, then a data binding needs to be set-up to identify where the values will come from within the underlying data. Please refer to the Bindings section for more details.
Select Box	Allows users to select a single value from a drop-down list of values. The list of values can be static or dynamic, similar to that described against the Radio control above.
Multi-Select Box	Similar to the Select Box, but allows users to select more than one value from the drop-down list.
Filtering Select Box	Select box that filters a list of values by matching characters as they are typed.
Autocomplete List	Allows multiple values to be selected from a filtered list of values. The selected items are displayed as tagged entries, similar to a list of recipients in an e-mail program. The items can be filtered and selected by typing or clicking within the control. Selected items can be removed by clicking the x within each selected value.
List Builder	Provides two lists with the ability to move items between them. The left hand side contains the list of all selectable items. The right hand side contains the selected items and can be ordered as required. Field fullList should be bound to list all selectable items and hidden field currentOptions contains the selected items.
Checkbox	Allows users to select a single value using a checkbox. It is possible to state the default value, checked value and unchecked value.
Toggle	This is similar to the Checkbox, but provides a sliding switch that can be used to indicate whether the value is checked or not.
Multi-Checkbox	Allows users to select more than one checkbox.
Date Time	Captures input in a date/time format. By default, this provides a calendar picker. Various parameters can be altered in the Data Constraints and Value Conversions sections. For example, the display options can be changed for the calendar to be more appropriate for birth dates, e.g. Calendar Type - Year and Month selection drop-downs.
Currency	A control designed for input and formatting of currency values. When users click on the field it displays the numeric part of the currency. When they click off the field it will format the data based on the locale of the Browser and apply a currency code if defined in the Custom Attributes section.
Number	A text box configured for number values. When users click on the field it displays the number value. When they click off the field it will format based on the locale of the Browser.
Number Spinner	A text box for number values with up and down arrows to change the values. Note: This will not render completely on the Page View because it relies on JavaScript.
Number Slider	The number slider provides a graphical scale for the selection of a number within a range. Use the Validation Constraints to define the range of available numbers, and a 'step' Custom Attribute can be added if required to indicate the incremental steps. In addition, you can show a string after the current value (eg to indicate the units), by adding a 'data-wm-display-suffix' Custom Attribute.
Text Area	Allows a user to enter several lines of text in a multi-line text box.
Rich Text Editor	This allows users to enter multiple lines of text, and provides WYSIWYG editing capabilities for setting fonts, colours etc.
Paragraph	Displays an output only rich text field, allowing for formatting of a series of sentences or bullet points.
Password	Allows entry of masked passwords. Entered values are captured as dots.
Image	Embeds an image file (bmp, jpg, gif, etc.), frequently used for logos or graphics. Images can be selected from the local repository, or uploaded from another location. The image displayed can also be dynamically defined via bindings. Please refer to the WebMaker Forum entry How to dynamically change an image/icon displayed for a value e.g. a Status for more detailed configuration options.
Color Filter	This is a simple Colour Filter that lets you select a colour and its transparency. You can use it to create some cool effects for great-looking transluscent and deep backgrounds, or simply to mask backgrounds for superimposing foreground text.
Menu	Responsive menu, including the classic hamburger feature for mobile devices. Includes data-binding and multi-level features. Please see the Menu Control section for more details.
Navbar	Creates an animated top-level strip, incorporating a logo, menus, search bar, etc. You can tailor it to your specific requirements.
File Upload	Can be used to upload files to Servers. See the File Upload Control section for more details.
HTML Hidden Field	Commonly used for holding and exchanging non-display values with Servers. These fields are only shown on the Page View when Design Mode is switched on.
Data Bound Structure	A hidden control that is used to pass complete data structures from the server to the page for later script processing. See the Javascript APIs section for details on how to access the data from your script.
Custom HTML	Allows users to enter XML-compliant HTML.

Table of Text Controls, that can be used to create Titles, Headings, Body Text, etc.

Control	Description and Notes
Various	The Text Controls section of the palette contains a range of text controls that are focused on the creation of static and responsive client-side text elements such as Titles, Headings, Body Text, Rich Text, etc.

Table of Layout Containers that can be used to group and layout your page structures rapidly. This group also contains more complex controls that act as display containers for complex data.

Control	Description and Notes
Layout Grids and Layout Groups	Layout Grids and Layout Groups are the two main containers in WebMaker that are primarily used to design the layout and structure of your web pages. At runtime, these containers are generally invisible. A Layout grid is a container of cells, each of which can be used to contain other controls, including layout groups and other grids. The grid can be expanded, including the ability to merge and split cells. Each grid cell behaves like a layout group and allows you to align, size and position collections of controls. Layout groups can be nested and used to organise and orchestrate the attributes of contained controls, including hiding, showing, disabling, positioning, etc.
Bordered Group with Label	Layout groups are invisible and mainly used to layout, hide, show data, etc. As a result, they contain little or no internal structure to minimise any interference with internal contents. If you want to create a group of controls with a label then this is the most appropriate control to use, which will enable you to have better control over responsive positioning of such labels. You also have access to a variety of text controls if you want to create your own custom labels.
Tabs	By default, the tab control contains two tabs. The + symbol to the right of the existing tabs can be used to add additional tabs. Tabs can be dragged and reordered or deleted by using the right-click context menu. Tabs are controlled by a Tab Control Field. The properties for this field can be accessed by clicking on the background, to the right of the + symbol.
Collapsible Content	Can be used to hide or reveal a group of controls. The Control Styling - Class Name of the show_hide_details field should be set to toggleHidden or toggleVisible, depending on the visibility required when the page is loaded. The default is toggleHidden, which hides the collapsible_content group, and shows the collapsed_content group. The collapsible_content group should contain the controls that need to be hidden or revealed. The collapsed_content group enables some summary data to be shown if the group is hidden. If the summary is not required when collapsed, the collapsed_content group can be removed. The Custom Attributes can be used to change the label prefixes that are appended to the Anchors Caption. The default is Show and Hide.
Accordion	Accordions provide multiple panes, each of which can act as containers for other controls. Only one pane is visible at any one time. The titles for the Panes can be changed within the Custom Attributes section of the Properties tab. The rendering of this control requires a full preview. The Page view will only display the group boundaries for the panes in design mode.
Popup Dialog	Popup Dialogues are initially hidden after load. To enable them (popup), an event such as onclick needs to be defined against a suitable trigger control such as a Button or Hyperlink. The Toggle Group Visibility action needs to be used as a result of the event and the group to be made visible should be the popup dialogue container group.
Editable Table	A table control that allows insertion, modification and deletion of rows. Please see the Editable Table Control section for more details.
Paging Table	Provides a navigation control to enable the information in the table to be browsed a page at a time, with the ability to move backwards and forwards. Also allows sorting of information. Please see the Paging Table Control section for more details.
Data Cards	Provides a 'card' of information for each record in a repeating data set. Please see the Data Cards Control section for more details.
Ordered List	Creates the HTML <ol> and <li> tags as the containers for the elements which are dropped into this type of layout group.
Unordered List	Creates the HTML <ul> and <li> tags as the containers for the elements which are dropped into this type of layout group.
Info Panel	Provides three layers, which you can use to allocate a background image and colour filter above the image. In the third layer in the foreground you have a font icon, heading and description field. This can be useful for creating a range of summary app features.
Animated Groups	Various controls with animated groups of content that reveal upon scroll, using native CSS3 techniques.
Partial Page Container (Requires Server Controllers)	Acts as a container for content returned by AJAX submissions.
Repeat Only	Acts as a general-purpose container for managing the display of repeating information, including other layout groups. For example, a Repeat Only container can contain a group that contains an address. The Repeat Only container can then reference the repeating data that contains all addresses to display a list of repeating addresses, with each address contained in its own group.
HTML Container	Simple container element with minimal layout options.

Table of Miscellaneous Controls

Control	Description and Notes
Print this Web Page Link	This adds a Printer icon on the page which will only be shown on the screen. When the icon is clicked, it will display a print window or print preview window depending on your Browser settings.
Page Break Group	Inserts a page break to force content onto the next physical sheet of paper during printing.
Separator	Renders a horizontal line across the container within which it is placed.
Spacer	Allows space to be inserted vertically or horizontally, to enable fine-tuning of control layouts. The size of the spacers can be adjusted by dragging the edges in the required direction.